<template>
  <Layout class="service">
    <Header>
      <v-header></v-header>
    </Header>
    <Content>
      <Row style="padding:0 13%">
        <Col span="24">
        <Menu
          mode="horizontal"
          :active-name="activeName"
          :class="isShow"
        >
          <MenuItem
            name="/service/culture"
            to="/service/culture"
          >文化娱乐</MenuItem>
          <MenuItem
            name="/service/consult"
            to="/service/consult"
          >咨询中心</MenuItem>
          <MenuItem
            name="/service/serve"
            to="/service/serve"
          >服务中心</MenuItem>
          <MenuItem
            name="/service/member"
            to="/service/member"
          >会员中心</MenuItem>
        </Menu>
        <Breadcrumb
          separator=">"
          style="padding:20px 0"
        >
          <BreadcrumbItem to="/index">首页</BreadcrumbItem>
          <BreadcrumbItem to="/service">世贸服务</BreadcrumbItem>
          <BreadcrumbItem>{{$route.meta.title}}</BreadcrumbItem>
        </Breadcrumb>
        <router-view></router-view>
        </Col>
      </Row>
    </Content>
    <Footer>
      <v-footer></v-footer>
    </Footer>
  </Layout>
</template>

<script>
import vHeader from '../components/main_header'
import vFooter from '../components/main_footer.vue'
export default {
  name: 'service',
  components: {
    vHeader,
    vFooter
  },
  computed:{
    isShow(){
      let isShow
      if (this.$route.path.split('/', 3)[2] == 'culture' || this.$route.path.split('/', 3)[2] == 'consult' || this.$route.path.split('/', 3)[2] == 'serve' || this.$route.path.split('/', 3)[2] == 'member') {
        isShow = ''
      } else {
        isShow = 'none'
      }
      return isShow
    }
  },
  data() {
    return {
       activeName: this.$route.path.split("/", 3).join("/")
    }
  },
}
</script>

<style scoped>
</style>